<mat-card>Special plans</mat-card>
<div class="content">
  <mat-progress-spinner *ngIf="!arePlansLoaded" mode="indeterminate">
  </mat-progress-spinner>
  <div *ngIf="arePlansLoaded">
    <table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> Index</th>
        <td mat-cell *matCellDef="let row"> {{row.id}}</td>
      </ng-container>

      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef> Description</th>
        <td mat-cell *matCellDef="let row"> {{row.description}}</td>
      </ng-container>

      <ng-container matColumnDef="day">
        <th mat-header-cell *matHeaderCellDef> Day</th>
        <td mat-cell *matCellDef="let row"> {{row.day}}</td>
      </ng-container>

      <ng-container matColumnDef="employeesPerDay">
        <th mat-header-cell *matHeaderCellDef> Number of employees</th>
        <td mat-cell *matCellDef="let row"> {{row.employeesPerDay}}</td>
      </ng-container>

      <ng-container matColumnDef="ordersPerDay">
        <th mat-header-cell *matHeaderCellDef> Orders</th>
        <td mat-cell *matCellDef="let row"> {{row.ordersPerDay}}</td>
      </ng-container>

      <ng-container matColumnDef="returnsPerDay">
        <th mat-header-cell *matHeaderCellDef> Returns</th>
        <td mat-cell *matCellDef="let row"> {{row.returnsPerDay}}</td>
      </ng-container>

      <ng-container matColumnDef="complaintsResolvedPerDay">
        <th mat-header-cell *matHeaderCellDef> Complaints</th>
        <td mat-cell *matCellDef="let row"> {{row.complaintsResolvedPerDay}}</td>
      </ng-container>

      <tr mat-header-row
        *matHeaderRowDef="['id', 'description', 'day', 'employeesPerDay', 'ordersPerDay', 'returnsPerDay', 'complaintsResolvedPerDay']"></tr>
      <tr mat-row
        *matRowDef="let row; columns: ['id', 'description', 'day', 'employeesPerDay', 'ordersPerDay', 'returnsPerDay', 'complaintsResolvedPerDay']"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>
</div>

